<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工管理</title>
<script type="text/javascript" src="${basePath }js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="${basePath }js/bootstrap.min.js"></script>
<link rel="stylesheet" href="${basePath }css/bootstrap.min.css">

</head>
<body>
<!--顶部-->
<div class="row">
    <div style="float:left;height:60px;background-color: black" class="col-md-4">
        <p style="margin-left: 30px;margin-top: 13px;color: white;font-size: large">
            <img src="${basePath}img/icon.png">
            原地起飞 - 餐厅到店点餐系统</p>
    </div>
    <div style="float:left;background-color:black;height:60px;padding:13px;" class="col-md-4">
        <form class="form-inline" action="" method="post">
            <div class="form-group">
                <input type="text" class="form-control" id="send" style="width: 300px" name="" placeholder="公告">
            </div>
            <button type="submit" class="btn btn-default">发送</button>
            <span href="#" style="color:white;">餐厅管理界面</span>
        </form>

    </div>
    <div style="float:left;background-color:black;height:60px;padding:5px;" class="col-md-4" >
        <p style="color:white;margin:15px">
            <img class="img-circle" src="${basePath}img/h1.png" style="width:30px;height:30px;object-fit:contain;">
            当前用户：【<a title="点击我即可修改信息" style="color:red;" href="${basePath }user/update.do?userId=${usermessage.userId}">
            ${usermessage.userName }</a>】，身份为：${usermessage.roleDO.roleName}
            <a href="${basePath }/OrderSys/pages/login.jsp" style="float:right;margin-right:10px;color: white">退出登录</a>
            <a style="float:right;margin-right:10px;color: white" href="${basePath }/OrderSys/pages/AdminIndex.jsp">回到管理员界面</a>
        </p>
    </div>
</div>
<!--主体-->
<div class="row">

</div>
<!--主体左侧-->
<div class="row col-md-3" >
    <div style="float:left;background-color:#F2F2F2;width:90%;height:650px;">
        <p style="font-size: 25px;margin:15px">
        <img src="${basePath}img/manage.png" style="width:40px;height:40px;">
        运营功能</p>
        <img src="${basePath}/img/jie.PNG" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="${basePath }OrderSys/admin/SettleOrderPass.jsp" style="color:#01A9DB;margin:10px">顾客结账界面</a>
<!--        <img style="height: 20px;width: 20px;margin: 3px"src="${basePath}img/infor.png" alt="" id="btn4">-->
        <p style="font-size: 25px;margin:15px">
            <img src="${basePath}img/eat.png" style="width:40px;height:40px;">
            餐厅管理</p>
        <img src="${basePath}img/user.png" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="${basePath }user/browseuser.do"
           style="color:#01A9DB;margin:10px" >
            员工管理</a><br>
        <img src="${basePath}img/location.png" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="${basePath}foodtype/findAllFoodType.do" style="color:#01A9DB;margin:10px">菜品管理</a><br>
        <!-- <img src="${basePath}img/run.png" style="width:30px;height:30px;margin:10px;object-fit:contain;">
        <a href="" style="color:#01A9DB;margin:10px">查看经营数据</a> -->
    </div>
</div>
<!--主体右侧-->
<div class="row col-md-9" style="margin-left: 11px">
<!--上-->
    <div style="background-color:#F2F2F2;height:35px;padding:10px;margin-left:15px;border-radius:5px;margin-top:15px;">
        <a>首页</a>/
        <a style="color: black">管理员</a>/
        <a style="color:#6F6F6F">员工管理界面</a>
    </div>
<!--下-->
    <div style="height:580px;margin-left:15px; margin-top:15px;border-radius:5px;border:2px solid #FFD6CC;">
        <div style="background-color:#FFD6CC;height:42px;padding:10px;">
            <p style="color:#881B00;font-size:17px">员工列表</p>
        </div>
        <div style="margin: 10px;">
            <p class="text-right">如果你需要在系统中添加一名员工，请点击右边按钮：
                <button type="button" class="btn btn-success" style="margin:3px">
                <a href="${basePath }user/register.do" style="color: white">添加员工</a></button></p>
        </div>
        <div>
            <table class="table table-striped table-hover" style="padding: 10px" id="userInfoTable">
                <tr>
                    <td>员工账号 </td>
                    <td>员工姓名</td>
                    <td>员工角色 </td>
                    <td> 操作 </td>
                </tr>
                <%! int i = 1; %> 
                <c:forEach items="${users}" var="u">
                    <tr>
                        <td>${u.userId }</td>
                        <td>${u.userName }</td>
                        <td>${u.roleDO.roleName }</td>
                        <td style="display: none;">${u.userPhotoPath}</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="...">
                                <a href="${basePath}user/update.do?userId=${u.userId}"
                                   class="btn btn-info">修改</a>
                                <button onclick="userInfoDetail(this)" value="<%=i%>" class="btn btn-success" >详情</button>
                                <button onclick="deleteUser(this)" value="${u.userId}" class="btn btn-danger">删除</button>
                            </div>
                            <!-- href="${basePath }user/delete.do?userId=${u.userId}" -->
                        </td>
                    </tr>
                    <% i = i+1; %> 
                </c:forEach>
                <% i = 1; %>
                <a id="deleteUser" ></a>
            </table>
            <pg:pager items="${total}" url="${basePath }user/browseuser.do"
                      maxIndexPages="3" maxPageItems="2" scope="request">
                <!-- <pg:param name="userId" value="${userId }" />
                <pg:param name="roleDO.roleId" value="${roleId}" /> -->
                <jsp:include page="../pages/PagerTag.jsp"></jsp:include>
            </pg:pager>
        </div>

    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="userModal" >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">详细信息</h4>
            </div>
            <div class="modal-body">
                <div class=".col-md-12">
                    <img id="userInfoImage" class="img-circle" style="width:100px;height:100px;display:block;margin: 0 auto 0;">
                </div>
                <div class="caption" style="margin-left: 100px" id="userInfoModal">
                    <h2>员工账号：</h2>
                    <h3>员工姓名：</h3>
                    <h3>员工角色：</h3>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
<!--悬浮框-->
        <!-- <div class="thumbnail" style="width:460px;height:460px;display:none;position:absolute;top:70px;margin-left:150px;background-color:white" id="">
            <div style="width:290px;height:35px;margin: 10px">
                <span style="font-size:20px">详细信息</span>
            </div>
            <div style="border-radius:5px;border:2px solid #FFD6CC;">
                <div style="background-color:#FFD6CC;height:42px;padding:10px;">
                    <p style="color:#881B00;font-size:15px">员工列表</p>
                </div>
                <div style="horiz-align: center">
            
                </div>
            </div>
            <a onclick="closeModal()" 
               class="btn btn-danger" style="width:50%;padding-bottom:0px;margin: 10px;margin-left:100px">关闭</a>
        </div> -->
</div>
<script>
    window.onload = function(){
        // var btn1 = document.getElementById('btn1');

        // btn1.onclick = function(){
        //     event.cancelBubble = true;
        //     flt.style.display = 'block';
        // }
        console.log("页面加载");
    }

    function userInfoDetail(d){
        console.log("调用点击函数");
        var i=d.value;
        console.log(i);
        var table = document.getElementById("userInfoTable");
        var rows = table.rows;
        var userId = rows[i].cells[0].innerHTML;
        var userName = rows[i].cells[1].innerHTML;
        var userRole = rows[i].cells[2].innerHTML;
        var userImagePath = rows[i].cells[3].innerHTML;
        document.getElementById("userInfoModal").innerHTML="<h2>员工账号："+userId+"</h2>"+"<h3>员工姓名："+userName+"</h3>"+"<h3>员工角色："+userRole+"</h3>";
        
        var image=document.getElementById("userInfoImage");
        image.setAttribute("src",userImagePath);
        jQuery("#userModal").modal('show');
        
    } 
    function deleteUser(userId){
        if(!confirm("是否删除该用户")) return;

        var id = userId.value;
        
        var url="${basePath}user/delete.do?userId="+id;

        var a=document.getElementById("deleteUser");
        a.setAttribute("href",url);
        a.click();  
    }
</script>
</body>

</html>